<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link href="${base}/resource/jquery/css/jquery-ui-custom.css" rel="stylesheet" media="screen">
<link href="${base}/resource/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="${base}/resource/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<!-- link href="${base}/resource/flexigrid/css/flexigrid.pack.css" rel="stylesheet" media="screen" -->
<!-- link href="${base}/resource/jqgrid/css/ui.jqgrid.css" rel="stylesheet" media="screen" -->
<!-- link href="${base}/resource/jqgrid/css/ui.multiselect.css" rel="stylesheet" media="screen" -->

<link rel="stylesheet" type="text/css" href="${base}/resource/jeasyui/themes/default/easyui.css">  
<link rel="stylesheet" type="text/css" href="${base}/resource/jeasyui/themes/icon.css">  
<link rel="stylesheet" type="text/css" href="${base}/resource/jeasyui/demo/demo.css">  
  


<style type="text/css">
body {
	padding-top: 60px;
    padding-bottom: 40px;
    font-family: 'Microsoft YaHei';
}
</style>

<script src="${base}/resource/jquery/js/jquery-1.9.1.min.js"></script>
<script src="${base}/resource/bootstrap/js/bootstrap.min.js"></script>
<!-- script src="${base}/resource/flexigrid/js/flexigrid.pack.js"></script -->
<!-- script src="${base}/resource/jqgrid/js/jquery.jqGrid.min.js"></script -->
<!-- script src="${base}/resource/jqgrid/plugins/jquery.tablednd.js"></script -->
<script type="text/javascript" src="${base}/resource/jeasyui/jquery.easyui.min.js"></script>  

</head>
<body>


 <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="brand" href="#">OBAS</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">网络路由扫描配置</a></li>
          <li><a href="#about">元数据配置</a></li>
     	</ul>
        <form class="navbar-form pull-right">
          <input class="span2" type="text" placeholder="用户">
          <input class="span2" type="password" placeholder="密码">
          <button type="submit" class="btn">登 录</button>
        </form>
      </div>
    </div>
  </div>
</div>


<div class="row">

    <div class="span8">
		<div class="span8">		
			<h4>用户信息录入</h4>
			
			<table id="dg" title="My Users" class="easyui-datagrid" style="width:700px;height:250px"  
		            url="get_users.php"  
		            toolbar="#toolbar" pagination="true"  
		            rownumbers="true" fitColumns="true" singleSelect="true">  
		        <thead>  
		            <tr>  
		                <th field="firstname" width="50">First Name</th>  
		                <th field="lastname" width="50">Last Name</th>  
		                <th field="phone" width="50">Phone</th>  
		                <th field="email" width="50">Email</th>  
		            </tr>  
		        </thead>  
		    </table>  
			
		</div>
		
		<div id="toolbar">  
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>  
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>  
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>  
	    </div>
		
		<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"  
            closed="true" buttons="#dlg-buttons">  
	        <div class="ftitle">User Information</div>  
	        <form id="fm" method="post" novalidate>  
	            <div class="fitem">  
	                <label>First Name:</label>  
	                <input name="firstname" class="easyui-validatebox" required="true">  
	            </div>  
	            <div class="fitem">  
	                <label>Last Name:</label>  
	                <input name="lastname" class="easyui-validatebox" required="true">  
	            </div>  
	            <div class="fitem">  
	                <label>Phone:</label>  
	                <input name="phone">  
	            </div>  
	            <div class="fitem">  
	                <label>Email:</label>  
	                <input name="email" class="easyui-validatebox" validType="email">  
	            </div>  
	        </form>  
	    </div>  
	    <div id="dlg-buttons">  
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>  
	        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>  
	    </div>  
		
		<div class="span8">		
			<h4>用户信息录入</h4>
			<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
			<p><a class="btn" href="#">View details &raquo;</a></p>
		</div>
    </div>

	<div class="span4">
      <h4>路由图</h4>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
   	</div>


</div>

<script type="text/javascript">  
    var url;  
    function newUser(){  
        $('#dlg').dialog('open').dialog('setTitle','New User');  
        $('#fm').form('clear');  
        url = 'save_user.php';  
    }  
    function editUser(){  
        var row = $('#dg').datagrid('getSelected');  
        if (row){  
            $('#dlg').dialog('open').dialog('setTitle','Edit User');  
            $('#fm').form('load',row);  
            url = 'update_user.php?id='+row.id;  
        }  
    }  
    function saveUser(){  
        $('#fm').form('submit',{  
            url: url,  
            onSubmit: function(){  
                return $(this).form('validate');  
            },  
            success: function(result){  
                var result = eval('('+result+')');  
                if (result.errorMsg){  
                    $.messager.show({  
                        title: 'Error',  
                        msg: result.errorMsg  
                    });  
                } else {  
                    $('#dlg').dialog('close');      // close the dialog  
                    $('#dg').datagrid('reload');    // reload the user data  
                }  
            }  
        });  
    }  
    function destroyUser(){  
        var row = $('#dg').datagrid('getSelected');  
        if (row){  
            $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){  
                if (r){  
                    $.post('destroy_user.php',{id:row.id},function(result){  
                        if (result.success){  
                            $('#dg').datagrid('reload');    // reload the user data  
                        } else {  
                            $.messager.show({   // show error message  
                                title: 'Error',  
                                msg: result.errorMsg  
                            });  
                        }  
                    },'json');  
                }  
            });  
        }  
    }  
</script> 

<style type="text/css">  
    #fm{  
        margin:0;  
        padding:10px 30px;  
    }  
    .ftitle{  
        font-size:14px;  
        font-weight:bold;  
        padding:5px 0;  
        margin-bottom:10px;  
        border-bottom:1px solid #ccc;  
    }  
    .fitem{  
        margin-bottom:5px;  
    }  
    .fitem label{  
        display:inline-block;  
        width:80px;  
    }  
</style>
    
</body>
</html>